<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onShow, onUnload, onHide } from '@dcloudio/uni-app';
import { getDanCiApi, checkWorldApi } from '../../api/request.js';
import { includeListGetItem } from '../../utils/index.js';
// 1美 2英
const type = ref(2);
const props = defineProps({});
onMounted(() => {});
let platform = uni.getStorageSync('platform');
const goback = async () => {
    uni.navigateBack();
};
const tijiao = async () => {
    if (getIdList.value.length != list.value.length) {
        uni.showToast({
            title: '请先学习完在提交',
            icon: 'none'
        });
        return;
    }
    uni.showLoading({
        mask: true
    });
    let res = await checkWorldApi({
        learning_id: query.value.id,
        check_id: query.value.check_id
    });
    uni.hideLoading();
    uni.showToast({
        title: res.msg,
        icon: 'none',
        duration: 1200
    });
    setTimeout(() => {
        if (res.code == 1) {
            uni.redirectTo({
                url: '/pages/user/components/worldStudyItem'
            });
        }
    }, 1200);
};
const query = ref({
    word_ids: '',
    hui: '',
    index: 0
});
const list = ref(null);
onHide(() => {
    uni.$emit('pause');
});
onUnload(() => {
    uni.$emit('pause');
});
onLoad(async (e) => {
    query.value.word_ids = e.error;
    query.value.hui = e.right;
    query.value.id = e.id;
    query.value.check_id = e.checkid;
});
onShow(async () => {
    let res = await getDanCiApi(query.value);
    list.value = res.data;
    console.log(list.value);
    if (uni.getStorageSync('bofangmoshi')) {
        type.value = uni.getStorageSync('bofangmoshi');
    }
});
const playIndex = ref(-1);
const last = () => {
    query.value.index = query.value.index == 0 ? 0 : query.value.index - 1;
    playIndex.value = -1;
};
const next = () => {
    playIndex.value = -1;
    query.value.index =
        query.value.index == Math.ceil(list.value.length / 5) - 1
            ? list.value.length / 5 - 1
            : query.value.index + 1;
};
//最后点击的是谁
const nowIndex = ref(null);
//被点击过都在里面
const getIdList = ref([]);
//点击过是第几次点击
const statusList = ref({});
const playAudio = (id, url, status = false) => {
    let http =
        type.value == 1
            ? 'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_word/'
            : 'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/';
    console.log(`https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/${url}`);
    uni.$emit('playAudio', http + `${url}`, true);
    nowIndex.value = id;
    const indexs = getIdList.value.findIndex((item) => item == id);
    if (indexs == -1) {
        getIdList.value.push(id);
    }
    //剪纸盒子的骡子
    const index = statusList.value.id == id;
    if (!index) {
        statusList.value.id = id;
        statusList.value.status = 1;
        dianjihaishizuohua.value = status;
    } else {
        statusList.value.status =
            statusList.value.status == 1
                ? 2
                : statusList.value.status == 2
                ? 3
                : statusList.value.status == 3
                ? 1
                : 1;
    }
    if (statusList.value.status == 3) {
    }
};

const dianjihaishizuohua = ref(false);
const returnItemClassStatus = (id) => {
    //第一种情况
    if (nowIndex.value) {
        //第二种情况存在
        let index = includeListGetItem(getIdList.value, id);
        if (index == -1) {
            return 'none';
        } else {
            // 第三种 展示音标
            const zhege = statusList.value.id == id;
            if (zhege) {
                let num = statusList.value.status;
                //第一次点击
                if (num == 1) {
                    if (!dianjihaishizuohua.value) {
                        return 'heide';
                    } else {
                        return 'yinbiaos';
                    }
                    //第二次点击
                } else if (num == 2) {
                    if (!dianjihaishizuohua.value) {
                        return 'heides';
                    } else {
                        return 'fanyi';
                    }
                } else if (num == 3) {
                    // 说明是第三次
                    return 'kong';
                } else if (num == 4) {
                    if (!dianjihaishizuohua.value) {
                        return 'heide';
                    } else {
                        return 'yinbiaos';
                    }
                    // 说明还是你
                } else if (nowIndex.value == id) {
                    if (!dianjihaishizuohua.value) {
                        return 'heide';
                    } else {
                        return 'yinbiaos';
                    }
                } else {
                    return 'daiyanse';
                }
            } else {
                // return 'zhanshi';
                return 'none';
            }
        }
    } else {
        //黑 谁都没有过 最开始的样子
        return 'none';
    }
};
const startValue = ref(0);
const endValue = ref(0);
const minDistance = 60;
const handleTouchStart = (event) => {
    startValue.value = event.touches[0].clientX;
};
const touchend = (event) => {
    if (startValue.value == 0) {
        return;
    }
    endValue.value = event.changedTouches[0].clientX;
    let distance;
    distance = endValue.value - startValue.value;
    if (distance < minDistance) {
        return;
    } else {
        const item = list.value.find((item) => item.id == event.currentTarget.id);
        statusList.value = {};
        playAudio(item.id, item.detail.audio_file_name.word, true);
    }
};
const showTop = ref(false);
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <view class="lefts uni-row">
                <image
                    class="left"
                    src="/static/img/goback-black.png"
                    @click="goback"
                    mode="widthFix"
                />
                <view class="title"> 单词打卡 </view>
            </view>
            <view class="rights uni-row">
                <view class="menu">
                    <view class="item uni-row dayin" @click="showTop = !showTop"> 打印 </view>
                    <view class="item uni-row yings" v-show="showTop"> 英译汉 </view>
                    <view class="item uni-row yingss" v-show="showTop"> 汉译英 </view>
                </view>
                <view class="submit uni-row" @click="tijiao"> 完成 </view>
            </view>
        </view>
        <view class="body" v-if="list && list.length">
            <view
                class="item uni-row"
                :id="item.id"
                @touchstart="handleTouchStart"
                @touchend="touchend"
                v-for="(item, index) in list.slice(query.index * 5, (query.index + 1) * 5)"
                :key="index"
                :class="returnItemClassStatus(item.id)"
                @click="playAudio(item.id, item.detail.audio_file_name.word)"
                :style="{ height: (platform.gaodu - platform.dingbu - 96 - 160) / 5 + 'rpx' }"
            >
                <view
                    class="uni-row nei"
                    :style="{
                        height: (platform.gaodu - platform.dingbu - 96 - 160) / 5 + 'rpx'
                    }"
                >
                    <view class="lefts">
                        <view class="uni-row fa" v-if="item.detail">
                            <view
                                class="left yingwen"
                                v-for="(i, iIndex) in item.detail.s_split"
                                :key="index"
                                :class="iIndex % 2 == 0 ? 'actives' : 'defaults'"
                            >
                                {{ Object.keys(i)[0] }}
                            </view>
                        </view>
                        <view class="center yinbiao uni-row">
                            {{ type == 1 ? '美' : '英' }} :
                            <view
                                class="yinbiao"
                                v-for="(item, index) in item.detail.tran_memo"
                                :key="index"
                            >
                                {{ item }}
                            </view>
                        </view>
                    </view>
                    <view class="fanti">
                        {{ item.detail.youdao_api.translation[0] }}
                    </view>
                </view>
            </view>
        </view>
        <view class="nothing" v-if="list && list.length < 1">
            <image src="/static/img/nothing.png" class="img"></image>
            <view class="label"> 哎呀，这里什么内容都没有 </view>
        </view>
    </view>
    <view class="footers uni-row" v-if="list.length > 5">
        <view class="icon uni-row" @click="last">
            <image src="/static/img/wolrd/last.png" class="last"></image>
        </view>
        <view class="liang"> {{ query.index + 1 }} / {{ Math.ceil(list.length / 5) }} </view>
        <view class="icon uni-row" @click="next">
            <image src="/static/img/wolrd/next.png" class="next"></image>
        </view>
    </view>
</template>

<style scoped lang="less">
.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            margin-left: 32rpx;
        }

        .menu {
            position: relative;

            .item {
                justify-content: center;
                width: 144rpx;
                height: 52rpx;
                font-size: 24rpx;

                &.dayin {
                    color: #fff;
                    background: #fa862c;
                    border-radius: 8rpx;
                }

                &.yings {
                    position: absolute;
                    top: 52rpx;
                    z-index: 100;
                    background: #ffe5d2;
                    border-radius: 8rpx 8rpx 0 0;
                    color: #fa862c;
                }

                &.yingss {
                    border-radius: 0 0 8rpx 8rpx;
                    position: absolute;
                    top: 104rpx;
                    z-index: 100;
                    color: #fa862c;
                    background: #fff3ea;
                }
            }
        }

        .submit {
            font-size: 24rpx;
            color: #fff;
            background-color: #9561f3;
            justify-content: center;
            width: 144rpx;
            height: 52rpx;
            border-radius: 8rpx;
            margin-left: 32rpx;
        }
    }

    .body {
        // padding: 0 28rpx;

        .item {
            height: 196rpx;
            // margin-bottom: 16rpx;
            // border-radius: 8rpx;
            overflow: hidden;
            background-color: #fff;
            border-bottom: 1rpx solid #bcbcbc;

            .nei {
                // height: 196rpx;
                width: 100%;
                padding: 0 28rpx;
                justify-content: space-between;
                border-radius: 8rpx;
                font-size: 42rpx;

                .lefts {
                    .center {
                        display: none;
                        font-size: 22rpx;
                        color: #999999;
                    }
                }

                .fanti {
                    font-size: 28rpx;
                    color: #333333;
                    opacity: 0;
                    transition: 0.2s all;
                }
            }

            &.heide {
                .lefts {
                    .fa {
                        .left {
                            font-weight: 600;
                            font-size: 50rpx;
                        }
                    }
                }
            }

            &.heides {
                .lefts {
                    .fa {
                        .left {
                            font-weight: 600;
                            font-size: 50rpx;
                        }
                    }
                }

                .fanti {
                    opacity: 1;
                }
            }

            &.yinbiaos {
                .lefts {
                    .fa {
                        .left {
                            font-weight: 600;
                            font-size: 50rpx;

                            &.actives {
                                color: #222868;
                            }

                            &.defaults {
                                color: #fa862c;
                            }
                        }
                    }

                    .center {
                        display: flex;
                    }
                }
            }

            &.fanyi {
                .lefts {
                    .fa {
                        .left {
                            font-size: 50rpx;
                            font-weight: 600;

                            &.actives {
                                color: #222868;
                            }

                            &.defaults {
                                color: #fa862c;
                            }
                        }
                    }

                    .center {
                        display: flex;
                    }
                }

                .fanti {
                    opacity: 1;
                }
            }

            &.kong {
                .nei {
                    opacity: 0;
                }
            }

            &.cu {
                .lefts {
                    .fa {
                        .left {
                            font-size: 50rpx;
                            font-weight: 600;

                            &.actives {
                                color: #222868;
                            }

                            &.defaults {
                                color: #fa862c;
                            }
                        }
                    }
                }
            }

            &.zhanshi {
                .lefts {
                    .fa {
                        .left {
                            &.actives {
                                color: #222868;
                            }

                            &.defaults {
                                color: #fa862c;
                            }
                        }
                    }
                }
            }
        }
    }
}

.footers {
    position: fixed;
    left: 50%;
    bottom: 28rpx;
    transform: translate(-50%, 0);
    justify-content: center;

    .liang {
        font-size: 24rpx;
        color: #333333;
        // margin: 0 26rpx;
    }

    .icon {
        justify-content: center;
        padding: 0 26rpx;
    }

    .last,
    .next {
        width: 40rpx;
        height: 40rpx;
    }
}
</style>
